<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>节流的实现</title>
    <style>
      .box {
        width: 500px;
        height: 500px;
        background-color: #ccc;
        color: #fff;
        text-align: center;
        line-height: 500px;
        font-size: 100px;
      }
    </style>
  </head>
  <body>
    <!-- 
        节流：单位时间内，频繁触发事件，只执行一次
            在执行下一次事件时要等上一次事件执行完毕后才会执行
        使用场景：
            1、鼠标移动 mousemove  
            2、页面尺寸缩放 resize  
            3、滚动条滚动scroll等等
        实现方法：
            1、lodash库 _.throttle(func,wait)
            2、手写节流函数
     -->
    <div class="box"></div>
    <script src="http://cdn.staticfile.org/lodash.js/4.17.21/lodash.min.js"></script>
    <script>
      // lodash库实现
      const box = document.querySelector(".box");
      let i = 1;
      function mouseMove() {
        box.innerHTML = i++;
      }
      // box.addEventListener('mousemove',_.throttle(mouseMove,3000))
    </script>

    <script>
      // 手写一个节流函数
      function throttle(func,t){
        let timer 
        return function(){
            if(!timer){ // 没有定时器
                timer = setTimeout(function(){
                    func()
                    // 清空定时器
                    timer = null
                },t)
            }else{
                return
            }
        }
      }
      box.addEventListener('mousemove',throttle(mouseMove,1000))

    //   ☆☆ 在setTimeout 中是无法删除定时器的，因为定时器还在运转，所以使用timer= null 而不是clearTimeout(timer)

    </script>
  </body>
</html>
